/**
 * 受控组件练习  调色板
 */
import React, { Component } from 'react'
import './5.css';

export default class ColorPicker extends Component {
  //声明状态
  state = {
    r: 0,
    g: 0,
    b: 0
  }

  render() {
    //解构赋值
    let {r,g,b} = this.state;

    return (
      <div className='color-container'>
        <div className="color-wrapper">
          <div className="color-show" style={{background: `rgb(${r},${g},${b})`}}></div>
          <hr />
          <div className="color-control">
            R: <input type="range" value={r} min="0" max="255" onChange={this.setColor('r')}  /><br/>
            G: <input type="range" value={g} min="0" max="255" onChange={this.setColor('g')}  /><br/>
            B: <input type="range" value={b} min="0" max="255" onChange={this.setColor('b')}  /><br/>
          </div>
        </div>
      </div>
    )
  }

  setColor = (type) => {
    return (e) => {
      this.setState({
        [type]: e.target.value
      })
    }
  }
}
